<app-content-toolbar>
  <button nz-button (click)="openEditor()" [nzType]="'primary'" data-testid="add-project-btn">
    <i nz-icon nzType="plus"></i>
    <span>{{ 'global.add' | translate }}</span>
  </button>
</app-content-toolbar>
<app-content-body>
  <nz-table #sortTable nzShowSizeChanger
            [nzFrontPagination]="false"
            [nzTotal]="total"
            [nzPageSize]="pageSize"
            [nzPageIndex]="pageIndex"
            [nzData]="items"
            [nzShowTotal]="totalTemplate"
            nzTableLayout="fixed"
            (nzQueryParams)="onQueryParamsChange($event)"
            [nzLoading]="tableLoading">
    <thead>
    <tr>
      <th nzWidth="80px">{{ 'global.id' | translate }}</th>
      <th>{{ 'project.name' | translate }}</th>
      <th>{{ 'global.comment' | translate }}</th>
      <th>{{ 'global.created_at' | translate }}</th>
      <th>{{ 'global.updated_at' | translate }}</th>
      <th>{{ 'global.action' | translate }}</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of sortTable.data">
      <td>{{ data.id }}</td>
      <td>{{ data.name }}</td>
      <td nzEllipsis>{{ data.comment }}</td>
      <td>{{ formatDatetime(data.created_at) }}</td>
      <td>{{ formatDatetime(data.updated_at) }}</td>
      <td>
        <a (click)="openEditor(data)" data-testid="project-list-edit">{{ 'global.edit' | translate }}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="openDeleteConfirm(data.id)" data-testid="project-list-delete">{{ 'global.delete' | translate }}</a>
      </td>
    </tr>
    </tbody>
  </nz-table>
</app-content-body>
<ng-template #totalTemplate>{{ 'global.total' | translate }} {{ total }} {{ 'global.item' | translate }}</ng-template>

<nz-modal [(nzVisible)]="editorVisible" [nzTitle]="editorTitle" (nzOnCancel)="handleCancel()">
  <div *nzModalContent data-testid="project-form-modal">
    <form nz-form [formGroup]="selfFormGroup">
      <nz-form-item>
        <nz-form-label nzRequired [nzSpan]="4">{{ 'project.name' | translate }}</nz-form-label>
        <nz-form-control [nzSpan]="7" data-testid="project-form-name">
          <input nz-input formControlName="name"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ 'global.comment' | translate }}</nz-form-label>
        <nz-form-control data-testid="project-form-comment">
          <textarea rows="4" nz-input formControlName="comment"></textarea>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="handleCancel()"
            data-testid="project-form-cancel">{{ 'global.cancel' | translate }}</button>
    <button nz-button nzType="primary"
            [disabled]="selfFormGroup.invalid"
            [nzLoading]="editorSaving"
            data-testid="project-form-submit"
            (click)="handleSave()">{{ 'global.save' | translate }}</button>
  </div>
</nz-modal>
